<template>
    <div>
     <h1>订单管理</h1>
     <!-- <el-form inline ref="form" :model="form" label-width="80px">
       <el-form-item>
         <el-select v-model="model" placeholder="按订单号查询">
           <el-option label="label" value="value"></el-option>
         </el-select>
       </el-form-item>
        <el-input style="width:200px" v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="primary" size="medium" style="margin-left:10px">查询</el-button>
     </el-form> -->
     <el-button type="primary" @click="dialogFormVisible = true" size="medium">鸡肋的添加</el-button>
     <el-table border :data="orderList" style="width: 100%;margin-top:20px;">
       <el-table-column prop="number" label="订单号" align="center" width="width"></el-table-column>
       <el-table-column prop="userName" label="用户名"  align="center" width="width"></el-table-column>
       <el-table-column prop="userAddress" label="用户地址"  align="center" width="width"></el-table-column>
       <el-table-column prop="price" label="订单价钱"  align="center" width="width"></el-table-column>
       <el-table-column prop="Ordertime" label="创建时间"  align="center" width="width"></el-table-column>
       <el-table-column  label="操作"  align="center" width="width">
         <template slot-scope="{row,$index}">
           <el-button type="primary" size="mini" @click="deleteOrder(row,$index)">删除</el-button>
            <el-button type="primary" @click="handleEdit(row)" size="mini">弹窗编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
      <!-- 点击弹窗 -->
    <el-dialog title="修改订单信息" :visible.sync="dialogFormVisible">
    <el-form :model="order" >
          <el-form-item label="订单标号" >
            <el-input v-model="order.number"  ></el-input>
          </el-form-item>
          <el-form-item label="用户名" >
            <el-input v-model="order.userName" ></el-input>
          </el-form-item>
          <el-form-item label="用户地址" >
            <el-input v-model="order.userAddress" ></el-input>
          </el-form-item>
          <el-form-item label="订单价钱" >
            <el-input v-model="order.price" ></el-input>
          </el-form-item>
          <el-form-item label="创建时间" >
            <el-input v-model="order.Ordertime" ></el-input>
          </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹窗结束 -->
    </div>
</template>

<script>
export default {
    name:'',
    data(){
      return {
        dialogFormVisible:false,
        // 订单数据
        orderList:[], 
        order:
          {
            number:"",
            userName:"",
            price:"",
            userAddress:"",
            Ordertime:"",
            flag:0
          }
        
      }
    },
    created(){
      this.orderList=this.$store.state.brand.userAll.order.data.list

    },
     methods:{
        // 取消
        cancel(){
            this.dialogFormVisible=false
            this.order={
            number:"",
            userName:"",
            price:"",
            userAddress:"",
            Ordertime:""
           }
        },
        // 确定
        confirm(){
            this.dialogFormVisible=false
            if(!this.order.flag ){
              this.orderList.push(this.order)
            }else{
            this.orderList.filter((item)=>{
              if(item.hasOwnProperty("flag")){
                item=this.order
              }
            })
            }
            this.order={}
        },
        //编辑
        handleEdit(row,index){
          this.dialogFormVisible=true
          this.order=row
          this.orderList[index]=this.order
          this.orderList[index].flag=1
        },
        // 删除
        deleteOrder(row,index){
          this.orderList.splice(index,1)
        }


    }


};
</script>

<style scoped lang="less">

</style>
